<template>
  <div class="tab-upload-box">
    <el-tabs v-model="activeName" class="samples-tabs">
      <el-tab-pane v-for="(item , index) in tabsList" :key="index">
        <div slot="label" class="tabs-lable">
          <span>{{ item.name }}</span>
          <span v-show="fileCount(index)">({{ fileCount(index) }})</span>
        </div>
        <!-- limit是限制上传文件的总数，action是指上传文件的地址，任何字符串都行，应该在基层组件里写死，httpRequest是上传文件的方法 -->
        <upload
          ref="upload"
          :file-count-limit="item.limit||0"
          :file-list="fileList[index]"
          :size-limit="item.size"
          :type-limit="item.type"
          @removeList="(i)=>{return spliceList(i,index)}"
          @changeFile="files=>{return changeFileHandler(files,index)}"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import upload from './upload'
export default {
  components: {
    upload
  },
  props: {
    active: {
      type: String,
      default: '0'
    },
    tabsList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data() {
    return {
      activeName: this.active,
      fileList: [],
      uploadUrl: ''
    }
  },

  computed: {
    fileCount() {
      return index => {
        const list = this.fileList[index]
        if (list && list.length > 0) {
          return list.length
        } else {
          return false
        }
      }
    }
  },

  mounted() {},

  methods: {
    spliceList(i, index) {
      this.fileList[index].splice(i, 1)
    },
    // 文件变更方法
    changeFileHandler(files, index) {
      this.$set(this.fileList, index, files)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
